import './index.scss'
// 请求
import {
  getRequire,
  searchRequire,
  changeRequire,
  deleteRequire
} from '@/utils/httpAllMethods/requireHttp.jsx'
import React, { useState, useEffect } from 'react';

import PageName from '../../../../components/PageName/index.jsx';

import {
  Button,
  Form,
  Input,
  Space,
  Table,
  Modal,
  message,
  Select
} from 'antd';
import TextArea from 'antd/es/input/TextArea';

import { ExclamationCircleFilled } from '@ant-design/icons';

// 日期格式转换
import { parseTime } from '@/utils/date.jsx'

const { confirm } = Modal;

const Require = () => {

  // 表单
  const formRef = React.useRef(null);
  const [form] = Form.useForm();

  // 表格数据
  const [data, setData] = useState([])
  // 数据条数
  const [total, setTotal] = useState(1)

  // 页数
  const [currentPage, setCurrentPage] = useState(1)

  // 页面改变
  const onChange = (page) => {
    setCurrentPage(page.current);
  }

  // 处理
  const [editInitial, setEditInitial] = useState({})
  const [editId, setEditId] = useState(1)
  const [edit, setEdit] = useState(false);

  // 获取数据
  const getData = () => {
    getRequire().then(res => {
      let tableData = res.data
      setData(tableData)
      setTotal(tableData.length)
    })
  }

  // 清空
  const onReset = () => {
    getData()
    message.success('清空成功')
    formRef.current?.resetFields();
    
    
  };

  // 搜索
  const searchData = (params) => {
    if (params.require_type === '全部') {
      params.require_type = ''
    }
    if (params.r_status === '全部') {
      params.r_status = ''
    }
    searchRequire(params).then(res => {
      let tableData = res.data
      setData(tableData)
      setTotal(tableData.length)
      message.success(res.msg)
    })
  }

  // 处理
  const editData = (data) => {
    setEdit(true)
    let initialData = {
      user_name: data.user_name,
      require_type: data.require_type,
    }
    setEditInitial(initialData)
    setEditId(data.require_id)
  }
  // 确定处理
  const onEdit = (values) => {
    let params = {
      require_id: editId,
      r_result: values.r_result,
    }
    changeRequire(params).then(res => {
      getData()
      setEdit(false);
      message.success(res.msg)
    })


  };

  // 删除
  const deleteData = (require_id) => {
    confirm({
      title: '确定删除该信息吗?',
      icon: <ExclamationCircleFilled />,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        let params = {
          require_id
        }
        deleteRequire(params).then(res => {
          getData()
          message.success(res.msg)
        })
      },
      onCancel() {
        message.warning('取消删除')
      },
    });


  }

  // 数据
  useEffect(() => {
    getData()
  }, [])

  //表头
  const columns = [
    {
      title: '编号',
      dataIndex: 'require_id',
      key: 'require_id',
      align: 'center',
      render: (text, record, index) => index + (currentPage - 1) * 5 + 1
    },
    {
      title: '用户',
      dataIndex: 'user_name',
      key: 'user_name',
      align: 'center'
    },
    {
      title: '类型',
      dataIndex: 'require_type',
      key: 'require_type',
      align: 'center'
    },
    {
      title: '楼盘名称/经纪人',
      dataIndex: 'floor_name',
      key: 'floor_name',
      align: 'center'
    },
    {
      title: '状态',
      dataIndex: 'r_status',
      key: 'r_status',
      align: 'center'
    },
    {
      title: '处理结果',
      dataIndex: 'r_result',
      key: 'r_result',
      align: 'center'
    },
    {
      title: '发布时间',
      dataIndex: 'publish_time',
      key: 'publish_time',
      align: 'center',
      render: (_, { publish_time }) => {
        return parseTime(publish_time, '{y}-{m}-{d} {h}:{i}:{s}')
      }
    },
    {
      title: '操作',
      key: 'operate',
      align: 'center',
      render: (_, record) => {

        if (record.r_status === '未处理') {
          return (
            <Space size="middle">
              <a onClick={() => {
                editData(record)
              }}>处理</a>
            </Space>
          )
        } else {
          return (
            <Space size="middle">
              <a onClick={() => {
                deleteData(record.require_id)
              }}>删除</a>
            </Space>
          )
        }
      },
    },
  ];

  return (
    <>
      <PageName name="需求管理" />
      <header className='searchBox'>
        <Form
          colon={false}
          form={form}
          layout='inline'
          ref={formRef}
          onFinish={searchData}
          initialValues={{
            require_type: '全部',
            r_status: '全部',
            user_name: ''
          }}

        >
          {/* 需求类型 */}
          <Form.Item label="需求类型" name="require_type" style={{ minWidth: '200px' }}>
            <Select>
              <Select.Option value="全部">全部</Select.Option>
              <Select.Option value="调价提醒">调价提醒</Select.Option>
              <Select.Option value="开盘提醒">开盘提醒</Select.Option>
              <Select.Option value="预约看房">预约看房</Select.Option>
              <Select.Option value="咨询经纪人">咨询经纪人</Select.Option>
              <Select.Option value="其他">其他</Select.Option>
            </Select>
          </Form.Item>
          {/* 状态 */}
          <Form.Item label="状态" name="r_status" style={{ minWidth: '200px' }}>
            <Select>
              <Select.Option value="全部">全部</Select.Option>
              <Select.Option value="未处理">未处理</Select.Option>
              <Select.Option value="已处理">已处理</Select.Option>
            </Select>
          </Form.Item>
          {/* 发布者 */}
          <Form.Item label="发布者" name="user_name">
            <Input placeholder='请输入发布者'/>
          </Form.Item>
          {/* 按钮 */}
          <Form.Item>
            <Button type="primary" htmlType="submit" >
              搜索
            </Button>
            <Button htmlType="button" onClick={onReset} className='reset'>
              清空
            </Button>
          </Form.Item>
        </Form>
      </header>
      {/* 表格 */}
      <Table columns={columns} dataSource={data} pagination={{
        defaultCurrent: 1, total, defaultPageSize: 5, hideOnSinglePage: true
      }} rowKey={(record) => record.require_id} current={currentPage} onChange={onChange} />

      {/* 处理模态框 */}
      <EditForm
        open={edit}
        onCreate={onEdit}
        onCancel={() => {
          setEdit(false);
        }}
        editInitial={editInitial}
      />
    </>
  )
}


// 修改弹框
const EditForm = ({ open, onCreate, onCancel, editInitial }) => {
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue(editInitial)
  }, [editInitial])
  return (
    <Modal
      open={open}
      title="处理"
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
          });
      }}
      forceRender
    >
      <Form
        colon={false}
        form={form}
        name="form_in_modal"
      >
        <Form.Item
          name="user_name"
          label="用户"
        >
          <Input disabled />
          {/* <span>123</span> */}
        </Form.Item>
        <Form.Item
          name="require_type"
          label="类型"
        >
          <Input disabled />
        </Form.Item>
        <Form.Item
          name="r_result"
          label="处理结果"
          disabled
          rules={[
            {
              required: true,
              message: '请输入处理结果'
            },
          ]}
        >
          <TextArea />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Require